<!-- TabsWithUnderline.vue -->
<template>
  <div>
    <div class="tab-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
        :class="{
          active: activeTabIndex === index,
          noActive: activeTabIndex !== index,
        }"
      >
        <slot name="tab" :index="index" :label="tab">
          <!-- Default tab rendering if no slot is provided -->
          <div class="default-tab-style">{{ tab }}</div>
        </slot>
        <!-- <button @click="editTab(index)">Edit</button> -->
      </div>
      <div
        class="underline"
        :style="{
          width: underlineWidth + 40 + 'px',
          transform: `translateX(${underlineTranslate - 50}px)`,
        }"
      ></div>
    </div>

    <div class="tab-content">
      <slot :index="activeTabIndex"></slot>
    </div>
  </div>
</template>

<!-- 示例代码 <template>
  <div>
    <TabsWithUnderline :editableTabs.sync="editableTabs">
      <template v-slot:tab="{ index, label }">
        <div class="custom-tab-style">{{ label }} (Tab {{ index + 1 }})</div>
      </template>
      
      <div v-for="(tab, index) in editableTabs" :key="index">
        Tab Content {{ tab }}
      </div>
    </TabsWithUnderline>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const editableTabs = ref(['Tab 1', 'Tab 2', 'Tab 3']);
</script>

<style scoped>
.custom-tab-style {
  /* Your custom tab style */
  background-color: lightblue;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
</style> -->

<script setup lang="ts">
import { ref, onMounted, defineProps, defineEmits } from "vue";

const props = defineProps(["editableTabs"]);
const emits = defineEmits();

const tabs = ref<string[]>(props.editableTabs);
const activeTabIndex = ref(0);
const underlineWidth = ref(0);
const underlineTranslate = ref(0);

const selectTab = (index: number) => {
  activeTabIndex.value = index;
  updateUnderline();
};

/* 更新下滑线方法 */
const updateUnderline = () => {
  const tabElements = document.querySelectorAll(".tab-header > div");
  const activeTabElement = tabElements[activeTabIndex.value] as HTMLElement;

  if (activeTabElement) {
    underlineWidth.value = activeTabElement.offsetWidth;
    underlineTranslate.value = activeTabElement.offsetLeft;
  }
};

/* 添加tab 方法 */
const editTab = (index: number) => {
  const newTabLabel = prompt("Enter new tab label:");
  if (newTabLabel !== null) {
    tabs.value[index] = newTabLabel;
    emits("update:editableTabs", tabs.value);
    updateUnderline();
  }
};

onMounted(() => {
  updateUnderline();
});
</script>

<style scoped>
.tab-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
  position: relative;
  color: rgb(107, 107, 107);
}

.tab-header > div {
  cursor: pointer;
}

.tab-header > div.active {
  color: rgb(79, 79, 80);
}

.tab-header > div.noActive:hover {
  color: rgb(0, 0, 0);
}

.underline {
  height: 2px;
  background-color: rgb(
    79,
    79,
    80
  ); /* Change this to your desired underline color */
  position: absolute;
  bottom: 0;
  /* 这里为是否开启动画 */
  /* transition:
    width 0.3s,
    transform 0.3s; */
}

.tab-content {
  margin-top: 10px;
}

.default-tab-style {
  /* Default style for tabs if no custom slot is provided */
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
}
</style>
